<template>
  <div class="page home">
    <el-carousel
      ref="carousel"
      :autoplay="false"
      height="100%"
      class="carousel-h"
      trigger="click"
      arrow="never"
      @change="carouselChange"
    >
      <el-carousel-item>
        <div class="inner-container">
          <!-- 赋能下滑轮播 -->
          <el-carousel
            :autoplay="false"
            height="100%"
            arrow="never"
            :loop="false"
            direction="vertical"
            class="inner-carousel"
            ref="ic1"
            @change="inner1Change"
            indicator-position="none"
          >
            <el-carousel-item class="carousel1">
              <transition name="slide-fade">
                <div class="carousel-container center" v-if="carouselPage === 0">
                  <div class="center-hack"></div>
                  <div class="center-body carousel-body_works1"></div>
                </div>
              </transition>
            </el-carousel-item>
            <el-carousel-item class="inner-carousel2">
              <div class="home-link-wrapper center">
                <div class="center-hack"></div>
                <div class="center-body inner-carousel-center"></div>
                <div class="ask-btn" @click="showContactUs = true"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item class="inner-carousel3">
              <div class="home-link-wrapper center">
                <div class="center-hack"></div>
                <div class="center-body inner-carousel-center"></div>
                <div class="ask-btn" @click="showContactUs = true"></div>
              </div>
            </el-carousel-item>
            <el-carousel-item class="inner-carousel4">
              <div class="bio-title-wrapper">
                <div class="bio-title">
                  <span class="bio-title_text">BIO</span>
                  <div class="center-hack"></div>
                </div>
                <p class="bio-title2">CORE TEAM</p>
              </div>
              <div class="bio-panel">
                <div
                  v-for="(n, i) in bios"
                  :key="n._id"
                  class="bio-item"
                  :class="{ 'bio-item_next': i > 0 }"
                >
                  <img class="bio-image" :src="n.url" alt="BIO" />
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
          <carousel-arrow
            position="top"
            :text="innerArrowText('ic1', 'prev')"
            @click.native="innerToggle('ic1', 'prev')"
            v-show="ic1Page > 0"
          />
          <carousel-arrow
            position="bottom"
            :text="innerArrowText('ic1', 'next')"
            @click.native="innerToggle('ic1', 'next')"
            v-show="ic1Page < 3"
          />
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="n in 5" :key="n">
        <el-carousel
          :autoplay="false"
          height="100%"
          arrow="never"
          :loop="false"
          direction="vertical"
          class="inner-carousel"
          :ref="'c' + (n - 1)"
          indicator-position="none"
        >
          <el-carousel-item :class="'carousel' + (n + 1)">
            <transition name="slide-fade">
              <div class="carousel-container center" v-if="carouselPage === n">
                <div class="center-hack"></div>
                <div class="center-body" :class="'carousel-body_works' + (n + 1)">
                  <div class="body_works_inner"></div>
                </div>
              </div>
            </transition>
          </el-carousel-item>
          <el-carousel-item>
            <works-detail :index="n - 1"></works-detail>
          </el-carousel-item>
        </el-carousel>
        <carousel-arrow
          position="top"
          text="返回"
          v-show="worksArrowShow(n - 1, 'prev')"
          @click.native="toWorks('c' +  (n - 1), 'prev')"
        />
        <carousel-arrow
          position="bottom"
          text="详细案例"
          v-show="worksArrowShow(n-1)"
          @click.native="toWorks('c' + (n - 1), 'next')"
        />
      </el-carousel-item>
      <!-- 概念 -->
      <el-carousel-item>
        <div class="inner-container">
          <!-- 概念下滑轮播 -->
          <el-carousel
            :autoplay="false"
            height="100%"
            arrow="never"
            :loop="false"
            direction="vertical"
            class="inner-carousel"
            ref="ic7"
            @change="inner7Change"
            indicator-position="none"
          >
            <el-carousel-item class="carousel7">
              <transition name="slide-fade">
                <div class="carousel-container center">
                  <div class="center-hack"></div>
                  <div class="center-body carousel-body_works7"></div>
                </div>
              </transition>
              <div class="detail-btn-wrapper">
                <a
                  href="javascript:;"
                  class="detail-btn"
                  @click.prevent="$router.push('/solution')"
                ></a>
              </div>
            </el-carousel-item>
            <el-carousel-item class="inner7-carousel2">
              <div class="center">
                <div class="center-hack"></div>
                <div class="center-body inner7-carouse-center"></div>
              </div>
              <div class="detail-btn-wrapper">
                <a
                  href="javascript:;"
                  class="detail-btn"
                  @click.prevent="$router.push('/solution')"
                ></a>
              </div>
            </el-carousel-item>
            <el-carousel-item class="inner7-carousel3">
              <div class="center">
                <div class="center-hack"></div>
                <div class="center-body inner7-carouse-center"></div>
              </div>
              <div class="detail-btn-wrapper" v-if="carouselPage === 6">
                <a
                  href="javascript:;"
                  class="detail-btn"
                  @click.prevent="$router.push('/solution')"
                ></a>
              </div>
            </el-carousel-item>
          </el-carousel>
          <carousel-arrow
            position="top"
            :text="innerArrowText('ic7', 'prev')"
            @click.native="innerToggle('ic7', 'prev')"
            v-show="ic7Page > 0"
          />
          <carousel-arrow
            position="bottom"
            :text="innerArrowText('ic7', 'next')"
            @click.native="innerToggle('ic7', 'next')"
            v-show="ic7Page < 2"
          />
        </div>
      </el-carousel-item>
    </el-carousel>
    <carousel-arrow
      position="left"
      :text="arrowText('prev')"
      @click.native="toggle('prev')"
      :size="50"
    ></carousel-arrow>
    <carousel-arrow :text="arrowText()" @click.native="toggle('next')" :size="50"></carousel-arrow>
    <increase-layer></increase-layer>

    <!-- 显示联系我们弹出框 -->
    <contact-us :show="showContactUs" @close="showContactUs = false"></contact-us>
  </div>
</template>

<script>
import ajax from '../req'
import WorksDetail from '../components/Works'

export default {
  name: 'Home',
  components: {
    WorksDetail
  },
  data () {
    return {
      carouselPage: 0,
      ic1Page: 0,
      ic7Page: 0,
      bios: [],
      c0Page: 0,
      c1Page: 0,
      c2Page: 0,
      c3Page: 0,
      c4Page: 0,
      showContactUs: false
    }
  },
  created () {
    ajax.getJSON('/bios', (err, res) => {
      if (!err) {
        this.bios = res.bios
      }
    })
  },
  methods: {
    // 轮播翻页
    toggle (action) {
      this.$refs.carousel[action]()
    },
    // 轮播页改变事件
    carouselChange (curr) {
      this.carouselPage = curr
    },
    inner1Change (curr) {
      this.ic1Page = curr
    },
    inner7Change (curr) {
      this.ic7Page = curr
    },
    arrowText (page) {
      let i = this.carouselPage
      if (page === 'prev') {
        i = i === 0 ? 6 : i - 1
      } else {
        i = i === 6 ? 0 : i + 1
      }
      return this.$t('home.horizontal_arrow_text[' + i + ']')
    },
    // 子轮播切换翻页
    innerToggle (compt, dir) {
      this.$refs[compt][dir]()
    },
    innerArrowText (compt, dir) {
      let i = 0
      if (dir === 'prev') {
        i = this[compt + 'Page'] === 1 ? 3 : 1
      } else {
        i = this[compt + 'Page'] === 0 ? 0 : 2
      }
      return this.$t('home.vertical_arrow_text[' + i + ']')
    },
    worksArrowShow (n, p) {
      if (p === 'prev') {
        return this['c' + n + 'Page'] === 1
      } else {
        return this['c' + n + 'Page'] === 0
      }
    },
    toWorks (rf, p) {
      this.$refs[rf][0][p]()
      if (p === 'prev') {
        this[rf + 'Page'] = this[rf + 'Page'] - 1
      } else {
        this[rf + 'Page'] = this[rf + 'Page'] + 1
      }
    }
  }
}
</script>

<style lang="less">

.slide-fade-enter-active {
  transition: opacity 4s ease;
}
.slide-fade-leave-active {
  transition: opacity 4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
}

.ask-btn {
  width: 200px;
  height: 35px;
  background: url('../assets/imme_ask_btn.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;

  &:hover {
    background-image: url('../assets/imme_ask_btn_hover.png');
  }
}

.home {

  each(range(7), {
    .carousel@{value} {
      background: url('../assets/works@{value}_bg.png') no-repeat;
      background-size: cover;
    }
  });

  each(range(2, 4), {
    .inner-carousel@{value} {
      background: url('../assets/works_inner@{value}_bg.jpg') no-repeat;
      background-size: cover;
      .inner-center-item{

      }
    }
  });

  .inner-carousel-center{
    height: 60%;
    width: 650px;
    background-size: contain;
    background-position: center center;
    background-repeat:no-repeat;
  }

  .inner-carousel2 .inner-carousel-center{background-image: url('../assets/works_inner2_center.png');}
  .inner-carousel3 .inner-carousel-center{background-image: url('../assets/works_inner3_center.png');}

  .inner7-carousel2 {
    background: url('../assets/home7_inner1.jpg') no-repeat;
    background-size: 100% 100%;
  }
  .inner7-carousel3 {
    background: url('../assets/home7_inner2.jpg') no-repeat;
    background-size: cover;
  }

  .inner7-carousel2 ,.inner7-carousel3{
    .center{
      height:100%;
    }
    .inner7-carouse-center{
      height: 60%;
      width: 400px;
      background-size: contain;
      background-repeat:no-repeat;
    }
  }
  .inner7-carousel2  .inner7-carouse-center{background-image: url('../assets/home7_inner1_center.png');background-position: top center;}
  .inner7-carousel3  .inner7-carouse-center{background-image: url('../assets/home7_inner2_center.png');background-position: center center;width: 480px;height:80%}

  .home-link-wrapper {
    height: 100%;
    position: relative;
  }

  .ask-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15%;
  }

  .carousel-body_works1 {
    height: 60%;
    width: 650px;
    background: url('../assets/works1.png') no-repeat;
    background-size: contain;
    background-position: center center;
  }

  each(range(2, 6), {
    .carousel-body_works@{value} {
      width: 80%;
      height: 70%;
      background: url('../assets/works-line.png') no-repeat;
      background-size: 100% 100%;

      .body_works_inner{
        width:100%;
        height:100%;
        background: url('../assets/works@{value}.png') no-repeat;
        background-size: auto;
        background-position: center center;
      }
    }
  });

  .carousel-body_works7 {
    width: 350px;
    height: 400px;
    background: url('../assets/works7.png') no-repeat;
    background-size: 100% 100%;
  }

  .detail-btn-wrapper {
    position: absolute;
    top: 45%;
    left: 16%;
  }

  .detail-btn {
    display: inline-block;
    width: 200px;
    height: 40px;
    background: url('../assets/btn_detail.png') no-repeat;
    background-size: 100% 100%;
    transition: background .5s ease;

    &:hover {
      background-image: url('../assets/btn_detail_hover.png')
    }
  }

  .bio-title-wrapper {
    width: 500px;
    margin: 80px auto 0 auto;
    text-align: center;
    color: white;
  }
  .bio-title {
    font-size: 0;

    &::before, &::after {
      content: "";
      display: inline-block;
      height: 1px;
      width: 60px;
      vertical-align: middle;
      background-color: white;
    }
  }

  .bio-title_text {
    display: inline-block;
    padding: 0 60px;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
  }

  .bio-title2 {
    font-size: 12px;
    padding: 10px 0;
  }

  .bio-panel {
    width: 82%;
    height: 55%;
    margin: 10px auto 0 auto;
    white-space: nowrap;
    font-size: 0;
    overflow-x: auto;
    padding-bottom: 15px;
  }

  .bio-item {
    display: inline-block;
    width: 16%;
    height: 100%;
    background-color: gray;
    vertical-align: top;
  }

  .bio-item_next {
    margin-left: 5%;
  }

  .bio-image {
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}
.carousel-h {
  height: 100%;

  .el-carousel__button {
    background-color: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 1;

    &:hover {
      background-color: rgba(275, 173, 60, .5);
    }
  }

  .is-active .el-carousel__button {
    background-color: #FBB03B;
  }

  .el-carousel__indicators--horizontal {
    bottom: auto;
    top: 0;
  }

  .inner-container {
    height: 100%;
    position: relative;
  }

  .inner-carousel {
    height: 100%;
  }

  .carousel-container {
    height: 100%;
  }

}

</style>
